<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>피자 주문 페이지</title>
<script type="text/javascript">
	var request = null;

	function createRequest() {
		try {
			request = new XMLHttpRequest();
		} catch (trymicrosoft) {
			try {
				request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (othermicrosoft) {
				try {
					request = new ActiveXObject("Microsoft.XMLHTTP")
				} catch (failed) {
					request = null;
				}
			}
		}
		if (request == null) {
			alert("Error creating request object!");
		}
	}
	
	function getCustomerInfo() {
		var name = document.getElementById("name").value;
		createRequest();
		request.open(
				"GET",
				"lookUpCustomer.jsp?name=" + name,
				true);
		request.onreadystatechange = autoCompleteAddress;
		request.send(null);
	}
	
	function autoCompleteAddress() {
		
		if (request.readyState == 4) {
			document.getElementById("address").value
				= request.responseText;
		}
		
	}
	
	function submitOrder() {
		var name = document.getElementById("name").value;
		var order = document.getElementById("order").value;
		var address = document.getElementById("address").value;
		
		var data = "name=" + escape(name)
			+ "&order=" + escape(order)
			+ "&address=" + escape(address);
		
		createRequest();
		request.open(
				"POST",
				"placeOrder.jsp",
				true);
		request.onreadystatechange = orderCallback;
		request.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		request.send(data);
	}
	
	function orderCallback() {
		
		if (request.readyState == 4) {
			
			var responseText = request.responseText;
			
			alert(responseText);
			
			document.forms[0].reset();
		}
		
	}
</script>
</head>
<body onLoad="document.forms[0].reset();">
	<p>
		<img src="breakneck-logo.gif" alt="Break Neck Pizza" />
	</p>
	<form method="POST" action="" onsubmit="return false;">
		<p>
			Enter your name : <input type="text" size="14" name="name" id="name"
				onChange="getCustomerInfo();" />
		</p>
		<p>Type your order in here:</p>
		<p>
			<textarea name="order" id="order" rows="6" cols="50"></textarea>
		</p>
		<p>Your order will be delivered to:</p>
		<p>
			<textarea name="address" id="address" rows="4" cols="50"></textarea>
		</p>
		<p>
			<input type="button" id="submit" value="Order Pizza"
				onclick="submitOrder();" />
		</p>
	</form>
</body>
</html>